<template>
  <el-row>
    <el-col :span="8" :offset="16" style="text-align: right">
      <!-- el-badge  可以在按钮上做标记，显示信息数量 -->
      <el-badge :value="2" type="warning" class="my-msg">
        <el-button size="small"> 消息</el-button>
      </el-badge>
      <!-- el-dropdown 实现下拉选项 -->
      <el-dropdown>
        <el-avatar
          :size="50"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        >
        </el-avatar>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="logout">注销</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "TopHeader",
  methods: {
    logout() {
      this.$store.commit("logout");
      this.$message.success("注销成功");
      this.$router.push("/login");
    },
  },
};
</script>
<style>
.my-msg {
  margin-top: -30px;
  margin-right: 20px;
}
</style>
